<template>
  <div class="process">
    <h3>投递进度</h3>
    <job-list v-if="jobList.length>0" showState :list="jobList" :finished.sync="finished" :loading.sync="loading"
              @toFetch="fetchData"/>
    <div class="noData" v-else-if="jobList.length===0">
      <p>{{finished ? '暂无数据' : '加载中...'}}</p>
      <div class="img-box">
        <img src="../../assets/images/work.png">
      </div>
    </div>
  </div>
</template>

<script>
import JobList from '@/components/job/job-list'
import { userApply } from '@/api/users';

export default {
  name: 'Process',
  components: {JobList},
  data () {
    return {
      total: 0,
      pageNo: 1,
      jobList: [],
      finished: false,
      loading: false,
    }
  },
  created () {
    this.fetchData();
  },
  mounted () {
  },
  methods: {
    fetchData () {
      userApply({
        uid: this.$root.userInfo.id,
        page: this.pageNo
      }).then(res => {
        this.loading = false;
        this.finished = true;
        if (res.code === 200) {
          res.data && (this.total = res.data.count);
          res.data && (this.jobList = res.data.list);
        } else {
          this.$alertErr(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        this.loading = false;
        this.$alertErr(err || '网络错误, 稍后再试！');
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
.process
  h3
    padding-left 20px
    font-size 20px
    height 70px
    line-height 70px
</style>

